<template>
	<div class="login">
		<div class="container-login">
			<div class="container-login-box">
				<form class="login-form validate-form" @submit.prevent="handleSubmit">
					<span class="login-form-title">注册</span>

					<div class="login-input validate-input">
						<span for="userName" class="label-input">用户名</span>
						<input v-model="user.userName" id="userName" class="input" type="text" name="userName" placeholder="请输入用户名" autocomplete="off" :class="{ 'is-invalid': submitted && $v.user.userName.$error }">
						<span class="focus-input fa fa-user"></span>
					</div>
          <div v-if="submitted && !$v.user.userName.required" class="invalid-feedback">User Name is required</div>
          <div v-if="submitted && !$v.user.userName.minLength" class="invalid-feedback">User Name must at least Four characters</div>

          <div class="login-input validate-input">
            <span for="email" class="label-input">邮箱</span>
            <input v-model="user.email" id="email" class="input" type="email" name="email" placeholder="请输入邮箱" :class="{ 'is-invalid': submitted && $v.user.email.$error }">
            <span class="focus-input fa fa-envelope"></span>
          </div>
          <span v-if="submitted && !$v.user.email.required">Email is required</span>
          <span v-if="submitted && !$v.user.email.email">Email is invalid</span>

					<div class="login-input validate-input">
						<span for="password" class="label-input">密码</span>
						<input v-model="user.password" id="password" class="input" type="password" name="pass" placeholder="请输入密码" :class="{ 'is-invalid': submitted && $v.user.password.$error }">
						<span class="focus-input fa fa-lock" ></span>
					</div>
          <span v-if="submitted && !$v.user.password.required">Password is required</span>
          <span v-if="submitted && !$v.user.password.minLength">Password must be at least 6 characters</span>

          <div class="login-input validate-input">
            <span for="confirmPassword" class="label-input">确认密码</span>
            <input v-model="user.confirmPassword" id="confirmPassword" class="input" type="password" name="pass" placeholder="请再次输入密码" :class="{ 'is-invalid': submitted && $v.user.confirmPassword.$error }">
            <span class="focus-input fa fa-lock" ></span>
          </div>
          <span v-if="submitted && !$v.user.confirmPassword.required">Confirm Password is required</span>
          <span v-else-if="submitted && !$v.user.confirmPassword.sameAsPassword">Passwords must match</span>


					<div class="text-right">
						<a href="javascript:"><router-link to="/login">已有账号？去登录</router-link></a>
					</div>

					<div class="container-login-form-btn">
						<div class="wrap-login-form-btn">
							<div class="login-form-bgbtn"></div>
							<button class="login-form-btn">注册</button>
						</div>
					</div>
				</form>
			</div>
</div>
	</div>
</template>

<script type="text/javascript">
import { required, email, minLength, sameAs } from "vuelidate/lib/validators";

export default {
        name: "app",
        data() {
            return {
                user: {
                    userName: "",
                    email: "",
                    password: "",
                    confirmPassword: ""
                },
                submitted: false
            };
        },
        validations: {
            user: {
                userName: { required,minLength: minLength(4) },
                email: { required, email },
                password: { required, minLength: minLength(6) },
                confirmPassword: { required, sameAsPassword: sameAs('password') }
            }
        },
        methods: {
            handleSubmit(e) {
                this.submitted = true;

                // stop here if form is invalid
                this.$v.$touch();
                if (this.$v.$invalid) {
                    return;
                }

                alert("SUCCESS!! :-)\n\n" + JSON.stringify(this.user));
            }
        }
    };
	
</script>

<style scoped>
.body{
	text-align: center;
}
.container-login{
	background-image: url('../assets/img/bg-01.jpg');
	height: 1000px;
	width: 100%;
	text-align: center;
	position: relative;
}
.container-login-box {
  width: 500px;
  background: #fff;
  border-radius: 10px;
  height: 800px;
  overflow: hidden;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  padding-left: 55px;
  padding-right: 55px;
  padding-top: 65px;
  padding-bottom: 54px;
}
.login-from{
	width: 100%;
}

.login-form-title{
	display: block;
  font-family: 'Microsoft Yahei';
  font-size: 39px;
  color: #333333;
  line-height: 1.2;
  text-align: center;

  padding-bottom: 40px;
}

.login-form {
  width: 100%;
}

.login-input {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
  margin-left: 0px;
  margin-bottom: 23px;
}
.label-input {
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  float: left;
  text-align: center;
  padding-bottom: 10px;
}
.input {
  font-family: 'Microsoft Yahei';
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  border:none;  /*去掉input边框*/
  outline:none; /*去掉input focus时的边框*/
  display: block;
  width: 446px;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
}
.focus-input {
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
  top: 7px;
  left: 20px;
  pointer-events: none;

}

.focus-input::after {
  content: attr(data-symbol);
  font-family: Material-Design-Iconic-Font;
  color: #adadad;
  font-size: 22px;

  
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: calc(100% - 20px);
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-top: 3px;
}

.focus-input::before {
  /*content: ""; 需要去掉否则图标不显示*/
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7f7f7f;
 
  transition: all 0.4s;
}
.text-right{
	text-align: right;
	padding-top: 8px;
	padding-bottom: 31px;
}
.text-right a{
	text-decoration: none;
}
.container-login-form-btn {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrap-login-form-btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
  clear: both;
  box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  -webkit-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  
}

.login-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  top: 0;
  left: -100%;

}

.login-form-btn {
  font-family: 'Microsoft Yahei';
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  background: #a64bf4;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  
}

.login-form-btn:hover {
  left: 0;
  transition: all 0.4s;

}


</style>